<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
	xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户管理-列表</title>
<!-- 引入样式 -->
<link rel="stylesheet" type="text/css" href="/resources/zTree/css/metroStyle/metroStyle.css">
<link rel="stylesheet" href="/resources/css/public.css" media="all">
<link rel="stylesheet" href="/resources/zTree/plugin/css/index.css" media="all">
<link rel="stylesheet" href="/resources/layui/css/layui.css" media="all">
</head>
<body class="childrenBody">
	<!-- 搜索开始 -->
	<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
  		<legend>查询条件</legend>
	</fieldset>
	<form class="layui-form" action="" id="searchFrm">
		<div class="layui-form-item">
		    <div class="layui-inline">
		      <label class="layui-form-label">用户名称</label>
		      <div class="layui-input-inline">
		        <input type="text" name="name"  autocomplete="off" class="layui-input">
		      </div>
		    </div>
		    <div class="layui-inline">
		      <label class="layui-form-label">用户地址</label>
		      <div class="layui-input-inline">
		        <input type="text" name="address"   autocomplete="off" class="layui-input">
		      </div>
		    </div>
		    <div class="layui-inline">
		     <button type="button" class="layui-btn" id="doSearch">查询</button>
		      <button type="reset" class="layui-btn layui-btn-primary" >重置</button>
		    </div>
	  </div>
	</form>
	<!-- 搜索结束-->
	
	<!-- 表格数据开始 -->
	<table class="layui-hide" id="userList" lay-filter="userList"></table>
	<div id="tableToolBar" style="display: none;">
		<button type="button" class="layui-btn" lay-event="add" shiro:hasPermission="user:create">添加</button>
	</div>
	<div id="tableCellToolBar" style="display: none;">
		<button type="button" class="layui-btn layui-btn-sm  layui-btn-warm" lay-event="update" shiro:hasPermission="user:update">修改</button>
		<button type="button" class="layui-btn layui-btn-sm  layui-btn-danger" lay-event="resetPwd" shiro:hasPermission="user:resetpwd">重置密码</button>
		<button type="button" class="layui-btn layui-btn-sm  layui-btn-warm" lay-event="selectRole" shiro:hasPermission="user:selectRole">分配角色</button>
		<button type="button" class="layui-btn layui-btn-sm  layui-btn-danger" lay-event="delete" shiro:hasPermission="user:delete">删除</button>
	</div>
	<!-- 表格数据结束-->
	
	<!-- 添加。修改弹出层开始 -->
	<div id="dlg" style="display: none;margin: 10px">
		<form method="post" class="layui-form" id="dataFrm" lay-filter="dataFrm">
			 <div class="layui-form-item">
			    <div class="layui-inline">
			      <label class="layui-form-label">所在部门</label>
			      <div class="layui-input-inline">
			      	<input type="hidden" name="id">
			      	<div id="deptid"  name="deptid" class="select-tree layui-form-select"></div>
			      </div>
			    </div>
			    <div class="layui-inline">
			      <label class="layui-form-label">排序码</label>
			      <div class="layui-input-inline">
			        <input type="number" id="ordernum" name="ordernum" lay-verify="required|number" autocomplete="off" class="layui-input">
			      </div>
			    </div>
			  </div>
			  <div class="layui-form-item">
			    <div class="layui-inline">
			      <label class="layui-form-label">领导部门</label>
			      <div class="layui-input-inline">
			      	<input type="hidden" name="id">
			      	<div id="leaderdeptid"  name="leaderdeptid" class="select-tree layui-form-select"></div>
			      </div>
			    </div>
			    <div class="layui-inline">
			      <label class="layui-form-label">领导名称</label>
			      <div class="layui-input-inline">
			       	 <select name="mgr" id="mgr" lay-filter="mgr">
				      	 <option value=""></option>
				      </select>
			      </div>
			    </div>
			  </div>
			   <div class="layui-form-item">
			    <div class="layui-inline">
			      <label class="layui-form-label">用户名称</label>
			      <div class="layui-input-inline">
			      		<input type="text" name="name" id="username" lay-verify="required" autocomplete="off" placeholder="请输入用户名称" class="layui-input">
			      </div>
			    </div>
			    <div class="layui-inline">
			      <label class="layui-form-label">登陆名称</label>
			      <div class="layui-input-inline">
			      		<input type="text" name="loginname" id="loginname"  autocomplete="off" placeholder="请输入用户地址" class="layui-input">
			      </div>
			    </div>
			  </div>
			  <div class="layui-form-item">
			    <label class="layui-form-label">用户地址</label>
			    <div class="layui-input-block">
			          <input type="text" name="address"  autocomplete="off" placeholder="请输入用户地址" class="layui-input">
			    </div>
			  </div>
			  <div class="layui-form-item">
			    <label class="layui-form-label">用户备注</label>
			    <div class="layui-input-block">
			          <input type="text" name="remark"  autocomplete="off" placeholder="请输入用户备注" class="layui-input">
			    </div>
			  </div>
			  <div class="layui-form-item">
			    <div class="layui-inline">
			      <label class="layui-form-label">用户性别</label>
			      <div class="layui-input-inline">
			      		<input type="radio" name="sex" value="1" title="男" checked="">
      					<input type="radio" name="sex" value="0" title="女" >
			      </div>
			    </div>
			    <div class="layui-inline">
			      <label class="layui-form-label">是否可用</label>
			      <div class="layui-input-inline">
			      		<input type="radio" name="available" value="1" title="是" checked="">
      					<input type="radio" name="available" value="0" title="否" >
			      </div>
			    </div>
			  </div>
			  <div class="layui-form-item">
			    <div class="layui-inline">
			      <label class="layui-form-label">入职时间</label>
			      <div class="layui-input-inline">
			      		<input type="text" name="hiredate" id="hiredate"  placeholder="yyyy-MM-dd"  class="layui-input" >
			      </div>
			    </div>
			  </div>
			   <div class="layui-form-item" style="text-align: center;">
			      <button class="layui-btn" lay-submit="" lay-filter="doSubmit">提交</button>
			      <button type="reset" class="layui-btn layui-btn-warm">重置</button>
			  </div>
		</form>
	</div>
	<!-- 添加。修改弹出层结束 -->
	
	<!-- 分配角色的弹出层开始 -->
	<div id="selectRole" style="display: none;" class="childrenBody">
		<table class="layui-hide" id="roleList" lay-filter="roleList"></table>
		<div style="text-align: right;margin-top: 5px">
			<button class="layui-btn" id="saveUserRole" >确认分配</button>
		</div>
	</div>
	<!-- 分配角色的弹出层结束-->
</body>
<script type="text/javascript" src="/resources/layui/layui.js"></script>
<script type="text/javascript" src="/resources/zTree/js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="/resources/zTree/js/jquery.ztree.core.js"></script>
<script type="text/javascript" src="/resources/zTree/plugin/js/selectTree.js"></script>

<script type="text/javascript">
var tableIns;
var form;
layui.use([ 'layer', 'jquery', 'table', 'form','laydate' ], function() {
	var layer = layui.layer;
	var $ = layui.jquery;
	var table = layui.table;
	form = layui.form;
	var laydate=layui.laydate;
	
	laydate.render({
		elem:'#hiredate'
	})
	
	//渲染表格
	 tableIns = table.render({
		elem : '#userList', 
		url : '/user/loadAllUser', 
		cellMinWidth : 80, 
		page : true, 
		toolbar : '#tableToolBar',
		defaultToolbar : [ 'filter', 'print' ], 
		height:'430px',
		cols : [ [ 
			{ field : 'id', width : 80, title : 'ID', align : 'center'},
			{field : 'name',width : 100,title : '用户名称',align : 'center'},
			{field : 'loginname',width : 100,title : '登陆名称',align : 'center'},
			{field : 'deptName',width : 100,title : '所在部门',align : 'center'}, 
			{field : 'leaderName',title : '领导名称',width : 100,align : 'center'},
			{field : 'address',width : 150,title : '地址',align : 'center'}, 
			{field : 'remark',title : '备注',width : 150,align : 'center'},
			{field : 'sex',title : '性别',width : 100,align : 'center',templet:function(d){
				return d.sex==1?'<font color=blue>男</font>':'<font color=red>女</font>'
			}},
			{field : 'hiredate',title : '入职时间',width : 150,align : 'center'},
			{field : 'imgpath',width : 100,title : '头像',align : 'center',templet:function(d){
				return '<img width=30 height=30 src='+d.imgpath+' />'
			}}, 
			{field : 'available',width : 100,align : 'center',title : '是否可用',templet:function(d){
				return d.available==1?'<font color=blue>是</font>':'<font color=red>否</font>'
			}}, 
			{field : 'ordernum',title : '排序码',align : 'center'},
			{width : 350,title : '操作',align : 'center',toolbar : "#tableCellToolBar",fixed : 'right',align : 'center'
		} ] ]
	});

	//刷新表格
	$("#doSearch").click(function() {
		var params=$("#searchFrm").serialize();
		tableIns.reload({
			url : '/user/loadAllUser?'+params
		});
	})
	
	//监听表头事件
	table.on('toolbar(userList)', function(obj){
	  var checkStatus = table.checkStatus(obj.config.id);
	  switch(obj.event){
	    case 'add':
	      openAdd();
	    break;
	  };
	});
	//监听行工具条
	table.on('tool(userList)', function(obj){ 
	  var data = obj.data; 
	  var layEvent = obj.event; 
	  if(layEvent === 'update'){ 
		  openUpdate(data);
	  } else if(layEvent === 'delete'){ 
	    layer.confirm('真的删除【'+data.name+'】这个用户么？', function(index){
	    	$.post("/user/deleteUser",{id:data.id},function(obj){
	    		if(obj.code==200){
	      			layer.close(index);
	      			tableIns.reload();
	    		}
	    		layer.msg(obj.msg);
	    	})	    	
	    });
	  }else if (layEvent === 'resetPwd'){
		  layer.confirm('真的要重置【'+data.name+'】这个用户的密码么？', function(index){
		    	$.post("/user/resetUserpwd",{id:data.id},function(obj){
		    		if(obj.code==200){
		      			layer.close(index);
		      			tableIns.reload();
		    		}
		    		layer.msg(obj.msg);
		    	})	    	
		    });
	  }else if(layEvent === 'selectRole'){
		  openSelectRole(data);
	  }
	});
	//打开添加的弹出层
	var url=""
	var mainIndex;//弹出层的索引
	 function openAdd(){
		 mainIndex=layer.open({
			title:'添加用户',
			type:1,
			area:['700px','500px'],
			content:$("#dlg"),
			success:function(layero, index){
				$("#dataFrm")[0].reset();
				//form.val('dataFrm',{available:1,sex:1});
				//查询最大的排序码
				$.post("/user/loadMaxOrderNumber",function(obj){
					$("#ordernum").val(obj);
				});
				url="/user/addUser";
			}
		});
	}
	
	//打开修改弹出层
	function openUpdate(data){
		 mainIndex=layer.open({
				title:'修改用户',
				type:1,
				area:['700px','500px'],
				content:$("#dlg"),
				success:function(layero, index){
					$("#dataFrm")[0].reset();
					form.val('dataFrm',data);
					selectDefaultValue(data);
					url="/user/updateUser";
				}
			});
	}
	
	//做保存
	form.on("submit(doSubmit)",function(data){
		var params=$("#dataFrm").serialize();
		$.post(url,params,function(obj){
			if(obj.code==200){
				layer.msg(obj.msg);
				layer.close(mainIndex);
				tableIns.reload();
			}else{
				layer.msg(obj.msg);
			}
		});
		return false; 
	});
	
	//打开分配角色的弹出层
	var userId;
	function openSelectRole(data){
		userId=data.id;
		 mainIndex=layer.open({
				title:'分配【'+data.name+'】的角色',
				type:1,
				area:['700px','500px'],
				skin:'layui-layer-molv',
				content:$("#selectRole"),
				success:function(layero, index){
					 table.render({
							elem : '#roleList', 
							url : '/user/loadUserRole?id='+userId, 
							cellMinWidth : 80, 
							cols : [ [
								{ type : 'checkbox', width : 80 }, 
								{ field : 'id', title : 'ID', align : 'center'},
								{field : 'name',title : '角色名称',align : 'center'},
								{field : 'remark',title : '角色备注',align : 'center'}
							 ] ]
						});
				}
			});
	}
	
	//保存用户和角色之间的关系
	$("#saveUserRole").click(function(){
		var checkStatus = table.checkStatus('roleList'); //idTest 即为基础参数 id 对应的值
		var params="id="+userId;
		var data=checkStatus.data;
		if(data.length>0){
			for(var i=0;i<data.length;i++){
				params+="&ids="+data[i].id;
			}
		}
		$.post("/user/saveUserRole",params,function(obj){
			layer.msg(obj.msg);
		})

	});
});

//左边的树刷新表格
/* function reloadTable(id){
	tableIns.reload({
		url : '/user/loadAllUser?deptid='+id
	});
} */

function initSelectTreeData(){
    $.post("/dept/loadDeptLeftTreeJson",function(zNodes){
    	initSelectTree("deptid",zNodes,false)
    	initSelectTree("leaderdeptid",zNodes,false)
        $(".layui-nav-item a").bind("click", function () {
            if (!$(this).parent().hasClass("layui-nav-itemed") && !$(this).parent().parent().hasClass("layui-nav-child")) {
                $(".layui-nav-tree").find(".layui-nav-itemed").removeClass("layui-nav-itemed")
            }
        })
    });
}
initSelectTreeData();

function leaderDetpidChanage(id){
	$.post("/user/loadUserByDeptId",{deptid:id},function(obj){
		if(obj.length>0){
			$("#mgr").html("");
			for(var i=0;i<obj.length;i++){
				$("#mgr").append("<option value="+obj[i].id+" >"+obj[i].name+"</option>");
			}
			form.render("select");
		}
	});
}

//监控username的失去焦点事件
$("#username").blur(function(){
	var username=this.value;
	$.post("/user/changeUserNameToPinyin",{name:username},function(obj){
		$("#loginname").val(obj);
	});
})

//修改选中默认值
 function selectDefaultValue(data){
	//选中所在部门
	var treeObj = $.fn.zTree.getZTreeObj("deptidTree");
	var node = treeObj.getNodeByParam("id", data.deptid, null);
	treeObj.selectNode(node);
	//调用selectTree.js里面的onClick方法重新渲染
	onClick(event,"deptidTree",node);
	
	//选中领导部门
	var mgr = data.mgr;
	$.post("/user/loadUserById",{id:mgr},function(obj){
		var deptid = obj.deptid;
		var treeObj = $.fn.zTree.getZTreeObj("leaderdeptidTree");
		var node = treeObj.getNodeByParam("id", deptid, null);
		treeObj.selectNode(node);
		//调用selectTree.js里面的onClick方法重新渲染
		onClick(event,"leaderdeptidTree",node);
		
		//选中领导
		leaderDetpidChanage(deptid);
		$("#mgr").val(obj.id);
		form.render("select")
	});
}
</script>
</html>